<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Rose with CSS</title>
  <style>
    /* styles.css */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    .rose {
      position: relative;
      width: 200px;
      height: 200px;
      /* animation: bloom 5s infinite alternate; */
    }

    .petal {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: #ff5733;
      transform-origin: bottom center;
      /* animation: petalAnimation 5s infinite alternate; */
      transition: 0.36s ease-out;
      clip-path: polygon(49% 0, 95% 65%, 11% 94%);
      opacity: 0.5;
    }

    .petal:hover {
      /* clip-path: polygon(49% 19%, 95% 85%, 1% 99%); */
    }

    .rose:hover .petal1 { transform: rotate(0deg) translate(50px, 50px); animation-delay: 0ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal2 { transform: rotate(24deg) translate(50px, 50px); animation-delay: 100ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal3 { transform: rotate(48deg) translate(50px, 50px); animation-delay: 200ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal4 { transform: rotate(72deg) translate(50px, 50px); animation-delay: 300ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal5 { transform: rotate(96deg) translate(50px, 50px); animation-delay: 400ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal6 { transform: rotate(120deg) translate(50px, 50px); animation-delay: 500ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal7 { transform: rotate(144deg) translate(50px, 50px); animation-delay: 600ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal8 { transform: rotate(168deg) translate(50px, 50px); animation-delay: 700ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal9 { transform: rotate(192deg) translate(50px, 50px); animation-delay: 800ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal10 { transform: rotate(216deg) translate(50px, 50px); animation-delay: 900ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal11 { transform: rotate(240deg) translate(50px, 50px); animation-delay: 1000ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal12 { transform: rotate(264deg) translate(50px, 50px); animation-delay: 1100ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal13 { transform: rotate(288deg) translate(50px, 50px); animation-delay: 1200ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal14 { transform: rotate(312deg) translate(50px, 50px); animation-delay: 1300ms; opacity: 1;background-color: #fb4016; }
    .rose:hover .petal15 { transform: rotate(336deg) translate(50px, 50px); animation-delay: 1400ms; opacity: 1;background-color: #fb4016; }

    @keyframes bloom {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes petalAnimation {
      0% {
        transform: rotate(0deg) translate(50px, 50px) scale(0.5);
        opacity: 0.5;
      }
      100% {
        transform: rotate(0deg) translate(50px, 50px) scale(1);
        opacity: 1;
      }
    }

    .div {
      position: fixed;
      left: 60px;
      top: 60px;
      width: 200px;
      height: 150px;
      background-color: rgb(245, 104, 72);
      overflow: hidden;
    }
    .div::after {
      position: absolute;
      top: -125px;
      left: 50px;
      width: 200px;
      height: 200px;
      background-color: rgb(103 19 0 / 8%);
      border: 2px #f52f02;
      box-shadow: 0 0 5px 2px #f48e77;
      border-radius: 50%;
      transition: 0.2s ease-out;
      content: '';
    }
    .div:hover::after {
      box-shadow: 0 0 15px 8px #f48e77;
    }
  </style>
</head>
<body>
  <div class="div"></div>
  <div class="rose">
    <div class="petal petal1"></div>
    <div class="petal petal2"></div>
    <div class="petal petal3"></div>
    <div class="petal petal4"></div>
    <div class="petal petal5"></div>
    <div class="petal petal6"></div>
    <div class="petal petal7"></div>
    <div class="petal petal8"></div>
    <div class="petal petal9"></div>
    <div class="petal petal10"></div>
    <div class="petal petal11"></div>
    <div class="petal petal12"></div>
    <div class="petal petal13"></div>
    <div class="petal petal14"></div>
    <div class="petal petal15"></div>
  </div>
</body>
</html>